<template>
  <div class="app-container">
    <x-table ref="table" :headers="tableHeader" :seach="seachList" :edit-from="edidForm" />
    <!-- <el-dialog :title="$t(`table.${edit.textMap[edit.dialogStatus]}`)" :visible.sync="edit.dialogFormVisible">
      <el-form ref="dataForm" :rules="edit.rules" :model="edit.temp" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="$t('table.roleName')" prop="roleName">
          <el-input v-model="edit.temp.roleName"/>
        </el-form-item>
        <el-form-item :label="$t('table.power')" prop="power">
          <el-checkbox-group v-model="edit.temp.power">
            <el-checkbox v-for="(item,index) in powerMap" :key="index" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('table.use')" prop="status">
          <el-switch
            v-model="edit.temp.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item :label="$t('table.desc')" prop="desc">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" v-model="edit.temp.desc" type="textarea" placeholder="Please input"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit.dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="edit.dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog> -->

  </div>
</template>

<script>
import waves from '@/directive/waves'
import xTable from './table'
const powerMap = {
  admin: '管理员',
  editor: '编辑',
  root: '删库跑路'
}
export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: {
    xTable
  },
  data() {
    return {
      powerMap: powerMap,
      seachList: [[{
        click: 'add', // this.handleDelete
        tText: 'table.delete',
        bLabel: '添加',
        button: true
      }], [{
        label: '输入框',
        placeholder: '输入框',
        input: true,
        name: 'input'
      }, {
        label: '下拉',
        placeholder: ' 下拉',
        select: true,
        option: [{
          label: '22',
          value: '22'
        }],
        name: 'select'
      }], [{
        label: '日期',
        placeholder: ' 日期',
        date: true,
        type: 'datetime',
        name: 'date'
      }, {
        time: true,
        label: '时间',
        placeholder: ' 时间',
        name: 'time',
        endTime: 'endTime'
      }],
      [{ // 级联选择器
        cascader: true,
        label: '级联选择器',
        placeholder: ' 级联选择器',
        name: 'cascader',
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      }],

      [{
        radio: true,
        label: 'radio',
        name: 'radio',
        option: [{
          value: 'key1',
          text: ' text1'
        }, {
          value: 'key2',
          text: ' text2'
        }]
      },
      {
        checkbox: true,
        label: 'checkbox',
        name: 'checkbox2',
        option: [{
          value: 'key1',
          text: ' text1'
        }, {
          value: 'key2',
          text: ' text2'
        }]
      }],
      [{
        label: '活动形式',
        placeholder: '活动形式',
        input: true,
        type: 'textarea',
        max: 5,
        rows: 5,
        name: 'textarea'
      }],
      [{
        bLabel: '按钮查询',
        button: true,
        click: () => this.onSubmit()
      }]],
      edidForm: [{
        tlabel: 'table.roleName',
        placeholder: '输入框',
        input: true,
        name: 'input'
      }],
      edit: {
        textMap: {
          update: 'editrole',
          create: 'addrole'
        },
        rules: {
          power: [{ required: true, message: 'title is required', trigger: 'change' }],
          roleName: [{ required: true, message: 'title is required', trigger: 'blur' }]
        },
        temp: {
          id: null,
          roleName: '',
          status: 1,
          power: [],
          desc: ''
        },
        dialogStatus: 'create',
        dialogFormVisible: false
      },
      tableHeader: [
        {
          label: 'ID',
          width: 65,
          scope: 'id'
        },
        {
          tLabel: 'table.userName',
          width: 200,
          scope: 'userName'
        },
        {
          tLabel: 'table.role',
          scope: 'role'
        },
        {
          tLabel: 'table.phone',
          width: 200,
          scope: 'phone'
        },
        {
          tLabel: 'table.email',
          width: 200,
          scope: 'email'
        },
        {
          tLabel: 'table.addTime',
          width: 200,
          scope: 'time'
        },
        {
          tLabel: 'table.status',
          width: 200,
          scope: 'status'
        },
        {
          tLabel: 'table.actions',
          width: 300,
          className: 'small-padding fixed-width',
          button: [
            {
              type: 'primary',
              click: 'edit', // this.handleUpdate
              tText: 'table.edit'
            },
            {
              type: 'success',
              click: row => this.handleStatus(row, 1),
              tText: 'table.use',
              show: row => row.status === 0
            },
            {
              type: 'info',
              click: row => this.handleStatus(row, 0),
              tText: 'table.stopUse',
              show: row => row.status === 1
            },
            {
              type: 'danger',
              click: 'delete', // this.handleDelete
              tText: 'table.delete'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    onshow() {

    },
    powerFilter(status) {
      const arr = status.map(e => {
        return powerMap[e]
      })
      return {
        name: arr.join(','),
        arr,
        value: status
      }
    },
    getPowerVal(data) {
      const value = data.map(e => {
        for (const key in this.powerMap) {
          if (this.powerMap[key] === e) {
            return key
          }
        }
      })
      return value
    },
    getList() {
      this.$refs.table.initTableData(this.$api.adminList, {
        pageNo: 1,
        pageSize: 20
      })
    },
    // 修改状态
    handleStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    // 删除列表
    handleDelete(row) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      const index = this.list.indexOf(row)
      this.list.splice(index, 1)
    },
    // 初始化
    resetTemp() {
      this.edit.temp = {
        id: null,
        roleName: '',
        status: 1,
        power: [],
        desc: ''
      }
    },
    // 点击新增
    handleCreate() {
      this.resetTemp()
      this.edit.dialogStatus = 'create'
      this.edit.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新增data
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.edit.temp.power = this.powerFilter(this.getPowerVal(this.edit.temp.power))
          this.edit.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.list.push(this.edit.temp)
          this.edit.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    // 点击编辑

    // 更新data
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          for (const v of this.list) {
            if (v.id === this.edit.temp.id) {
              const index = this.list.indexOf(v)
              this.edit.temp.power = this.powerFilter(this.getPowerVal(this.edit.temp.power))
              this.list.splice(index, 1, this.edit.temp)
              break
            }
          }
          this.edit.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>
